<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.wrap{
				width: 600px;
				border: 1px solid #CCCCCC;
				margin: 20px auto 0;
			}
			ul{
				list-style: none;
				width: 200px;
				float: left;
			}
			ul li{
				width: 150px;
				background: gray;
				margin: 10px;
				color: white;
				font-size: 30px;
				text-align: center;
				border-radius: 50%;
				/*display: inline-block*/
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<ul></ul>
			<ul></ul>
			<ul></ul>
		</div>
	</body>
	<script type="text/javascript">
		function puBuLiu(){
			var colorArray = ["red","yellow","blue","green","black","gray","purple","pink"];
			var ulArray = document.getElementsByTagName("ul");
//			采取:每次生成一个li的时候，都去检测ul的高度，把这个li插入到高度最小的那个ul标签内部
			for(var i = 0;i < 100;i++){
				//创建一个li标签
				var li = document.createElement("li");
				li.innerHTML = i + 1;
				//寻找当前ul高度最小的
				var minUl = ulArray[0];
				for(var j = 0;j < ulArray.length;j++){
					if(minUl.offsetHeight > ulArray[j].offsetHeight){
						minUl = ulArray[j];
					}
				}
				var height = parseInt(Math.random()*51  + 50);
				var shuzi = Math.round(Math.random()*7);
				li.style.lineHeight = height + "px";
				li.style.height = height + "px";
				li.style.background = colorArray[shuzi];
				minUl.appendChild(li)
			}
		}
		puBuLiu();
	</script>
</html>
